<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>myNotes app</title>
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link href="/css/common.css" rel="stylesheet">
  <link href="/iconfont/iconfont.css" rel="stylesheet">
  <script src="/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-lg">
    <div class="wrapper fx">
      <div class="header fx">
        <div class="header-wrapper">
          <img src="/images/notes.png" class="logo" />
        </div>
        <div class="header-wrapper ml-14">
          <h3 class="title">myNotes</h3>
          <h4><a href="/about">关于 myNotes</a></h4>
      </div>
      </div>
      <div class="header-wrapper">
        <ul>
          <li class="btn bc-f8"><a href="/list-all-notes">我的笔记</a></li>
          <li class="btn bc-f8"><a href="/add-note">新增笔记</a> </li>
          <li class="btn bc-f8"><a href="/mine-collect">我的收藏</a></li>
          <li class="btn bc-f8"><a href="/register">用户注册</a></li>
          <li class="btn bc-f8"><a href="/reset?id={{ id }}">修改密码</a></li>
          <li class="btn bc-f8"><a href="/login">点击登录</a></li>
          <li class="btn bc-f8"><a href="/logout">退出登录</a></li>
        </ul>
      </div>
    </div>
    {{{ body }}}
    <p />
    <footer>&copy; 2024 Bob Tech Inc.</footer>

    {{!-- <div class="card" style="width: 18rem;">
      <img src="/images/notes.png" class="card-img-top" alt="标题笔记图">
      <div class="card-body">
        <h5 class="card-title">myNotes 笔记软件</h5>
        <p class="card-text">欢迎使用 myNotes 笔记软件</p>
        <a href="/about" class="btn btn-primary">关于 myNotes</a>
      </div>
    </div> --}}
  </div>
</body>
<script>

  // 删除
  function delNotes (event, id) {
  promiseAjax({
    method: 'post',
    url: 'http://localhost:3000/delete-note',
    data: {
      id
    },
    dataType: 'json',
  }).then(
    (res) => {
      window.location.href = `/list-all-notes`
    }
  ).catch(
    (err) => {
      console.log(err)
    }
  )
}
// 收藏
function onCollenct(event, id, collect) {
    promiseAjax({
    method: 'post',
    url: 'http://localhost:3000/collect-note',
    data: {
      id,
      collect: !collect
    },
    dataType: 'json',
  }).then(
    (res) => {
      window.location.href = `/list-all-notes`
    }
  ).catch(
    (err) => {
      console.log(err)
    }
  )
}
function promiseAjax (options) {
  return new Promise((resolve, reject) => {
    // 第一步:创建ajax(XMLHttpRequest)对象
    let xhr = new XMLHttpRequest()
    time = options.time || 0 //第二步：设置超时时间,超过time没有响应就超时了
    xhr.timeout = options.time

    xhr.ontimeout = function () { //添加超时的事件
      alert('sorry 请求超时')
    }

    let str = '' //判断发送给服务器数据的类型
    if (Object.prototype.toString.call(options.data) === '[object Object]') {
      for (let key in options.data) {
        str += key + '=' + options.data[key] + '&' //最后会多了一个&
      }
      str = str.slice(0, str.length - 1)
    } else if (Object.prototype.toString.call(options.data) === '[object ,String]') {
      str = options.data
    }
    //判断这个请求方式
    if (options.method.toLowerCase() === 'get') { //当为get请求时
      //2：初始化请求get请求时，参数放在查询字符串中发送
      xhr.open(options.method, options.url + '?' + str)
      //将请求发送到服务器
      xhr.send(null)
    } else if (options.method.toLowerCase() === 'post') {
      // 2 初始化请求(设定请求方式、请求地址、请求参数)
      xhr.open(options.method, options.url)
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
      xhr.send(str)

    }
    //跨域问题：http://localhost:8080/static/userCenter.html
    //  //5 等待 请求/响应 状态改变
    xhr.onreadystatechange = function () { //当readystate状态改变的时候执行的函数
      //readyState属性存在有五种XMLHttpRequest对象的状态值
      if (xhr.readyState === 4) { // 请求已完成
        if (xhr.status === 200) { //请求成功
          // xhr.responseXML、xhr.responseText都是后端传回来的数据
          if (options.dataType === 'json') {
            let obj = JSON.parse(xhr.responseText)
            resolve(obj)
            // options.success(obj)
          } else if (options.dataType === 'XML') {
            resolve(xhr.responseXML)
            // options.success(xhr.responseXML)
          } else {
            resolve(xhr.responseText)
            // options.success(xhr.responseText)
          }
        } else { //请求失败
          //返回http状态码
          // options.error(xhr.status)
          reject(xhr.status)
        }
      }
    }
  })
}
</script>

</html>